{% extends "admin/layout.html" %}
{% set active_page = "departments" %}

{% block content %}
<div class="container-fluid py-4">
    <div class="card shadow-sm">
        <!-- 标题栏 -->
        <div class="card-header px-4 d-flex justify-content-between align-items-center py-3">
            <h5 class="mb-0">组织架构管理</h5>
            <div class="d-flex gap-2">
                <button class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-download me-1"></i> 导出
                </button>
                <button class="btn btn-sm btn-primary">
                    <i class="fas fa-plus me-1"></i> 新建部门
                </button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="bg-light">
                    <tr>
                        <th class="fw-semibold" style="width: 120px">部门ID</th>
                        <th class="fw-semibold">部门名称</th>
                        <th class="fw-semibold">上级部门</th>
                        <th class="fw-semibold text-center" style="width: 120px">成员数量</th>
                        <th class="fw-semibold" style="width: 180px">最后同步时间</th>
                        <th class="fw-semibold text-center" style="width: 150px">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for dept in departments %}
                    <tr>
                        <td class="text-muted">{{ dept.id }}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-folder-tree me-2 text-warning"></i>
                                <span class="fw-medium">{{ dept.name }}</span>
                            </div>
                        </td>
                        <td>
                            {% if dept.parent_id %}
                            <span class="badge bg-light text-dark border">
                                        {{ dept.parent.name if dept.parent else dept.parent_id }}
                                    </span>
                            {% else %}
                            <span class="badge bg-primary">顶级部门</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                                <span class="badge bg-success rounded-pill px-2">
                                    {{ dept.member_count }} 人
                                </span>
                        </td>
                        <td>
                            {% if dept.last_sync %}
                            <div class="d-flex flex-column">
                                <span class="text-muted small">{{ dept.last_sync.strftime('%Y-%m-%d') }}</span>
                                <span class="text-muted small">{{ dept.last_sync.strftime('%H:%M') }}</span>
                            </div>
                            {% else %}
                            <span class="text-warning">等待同步</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex justify-content-center gap-2">
                                <button class="btn btn-sm btn-outline-info" title="查看成员">
                                    <i class="fas fa-users fa-sm"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" title="编辑">
                                    <i class="fas fa-edit fa-sm"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" title="删除">
                                    <i class="fas fa-trash-alt fa-sm"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class="text-center py-4 text-muted" colspan="6">
                            <i class="fas fa-inbox me-2"></i>暂无部门数据，请先创建部门
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="d-flex justify-content-center mt-4">
                <nav>
                    <ul class="pagination mb-0">
                        <li class="page-item {% if not has_prev %}disabled{% endif %}">
                            <a class="page-link px-3" href="{{ url_for('wxwork.list_departments', page=page-1) }}">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        </li>
                        {% for p in range(1, total_pages + 1) %}
                        <li class="page-item {% if p == page %}active{% endif %}">
                            <a class="page-link px-3" href="{{ url_for('wxwork.list_departments', page=p) }}">{{ p }}</a>
                        </li>
                        {% endfor %}
                        <li class="page-item {% if not has_next %}disabled{% endif %}">
                            <a class="page-link px-3" href="{{ url_for('wxwork.list_departments', page=page+1) }}">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
{% endblock %}